<!-- <script setup></script>

<template>
  <h1>You did it!</h1>
  <p>
    Visit <a href="https://vuejs.org/" target="_blank" rel="noopener">vuejs.org</a> to read the
    documentation
  </p>
</template>

<style scoped></style> -->


<!-- <template>
  <div> -->
    <!-- 以开放标签形式使用全局组件 -->
      <!-- <count-com></count-com> -->
      <!-- 以自闭合标签形式使用全局组件 -->
      <!-- <count-com/>
  </div>
</template>

<script>
</script>

<style scoped>
</style> -->


<!-- demo4-2-->
 <!-- <template>
  <div>
     <NumberCom/>
     <NumberCom/>
  </div>
</template>
<script> -->
<!-- //导入局部组件对象 -->
<!-- import NumberCom from './components/NumberCom.vue'
export default {//导出当前的单文件组件，供外部文件使用
  //注册局部组件
  components:{
    NumberCom 
  },
} -->
<!-- </script>

<style scoped>

</style> -->


<!-- demo4-3-->
<!-- <template>
  <div> -->
<!--     使用组件，给name属性传入不同的用户姓名 -->
<!--       <HelloCom name="Jim"></HelloCom>
      <HelloCom name="Lily"></HelloCom>
      <HelloCom name="Bob"></HelloCom> -->
<!--   </div>
</template>

<script>
import HelloCom from "./components/HelloCom.vue";
export default { -->
<!--   //注册组件
//   components: {
//     HelloCom,
//   },
// };
// </script> -->

<!-- <style scoped>
</style> -->
<!-- demo4-4-->
<!-- <template>
  <div>
    <input type="radio" v-model="activeComponent" value="ActiveCom1">ActiveCom1
    <input type="radio" v-model="activeComponent" value="ActiveCom2">ActiveCom2
    <keep-alive>
    <component :is="activeComponent"></component>
    </keep-alive>
  </div>
</template>
<script>
import ActiveCom1 from "./components/ActiveCom1.vue";
import ActiveCom2 from "./components/ActiveCom2.vue";
 
export default {
  data() {
    return {
      activeComponent: "ActiveCom2",
    };
  },
  //注册组件
  components: {
    ActiveCom1,
    ActiveCom2,
     
  },
};
</script>
<style scoped>
</style> -->

<!-- demo4-5-->
<!-- <template>
  <div>
      <Suspense>
        <template v-slot:default>
            <AsyncCom/>
        </template>
         <template v-slot:fallback>
            <h2>LOADING......</h2>
        </template>
      </Suspense>
  </div>
</template>
<script>
 import {defineAsyncComponent} from 'vue'
//  定义一个异步组件AsyncCom
 const AsyncCom=defineAsyncComponent(
 ()=>import("./components/HelloCom1.vue")
 )

export default {
 components:{
  AsyncCom
 }
}

</script>
<style scoped>
</style> -->

<!-- demo4-6-->
<!-- <template>
  <div>
    <button @click="currentTab = 'Tab1'">音乐</button>
    <button @click="currentTab = 'Tab2'">视频</button>
    <button @click="currentTab = 'Tab3'">新闻</button>
    <keep-alive>
      <component :is="currentTab"></component>
    </keep-alive>
  </div>
</template>
<script>
import Tab1 from "./components/TabCom1.vue";
import Tab2 from "./components/TabCom2.vue";
import Tab3 from "./components/TabCom3.vue";
export default {
  data() {
    return {
      currentTab: "Tab1",
    };
  },
  //注册组件
  components: {
    Tab1,
    Tab2,
    Tab3,
  },
};
</script>
<style scoped>
</style>
 -->

 <!-- demo4-7-->
<!-- <template>
  <div>
     <ChildCom msg="Hello,I am dad!"/>
  </div>
</template>
<script>
import ChildCom from './components/ChildCom.vue'
 
export default {
 components:{
   ChildCom
 }
}

</script>
<style scoped>
</style> -->

 <!-- demo4-8-->
<!-- <template>
  <div>
   <ChildCom :name="name" :age="age" /> 
   <mycom1 :parentMsg="msg"></mycom1>
   <mycom2 :childWidth="width"></mycom2>
  </div>
</template>

<script>
import ChildCom1 from './components/ChildCom1.vue'
import mycom1 from './components/MyCom1.vue'
import mycom2 from './components/MyCom2.vue'
export default {
  data(){
    return{
       name: "Jim",  //姓名
       age: [],  //年龄
       gender: "" , //性别
       hobby:[],//爱好
       width:400,
       msg:"父组件的msg"
    }
  },
 components:{
    ChildCom1,
    mycom1,
    mycom2
 }
}

</script>
<style scoped>
</style> -->

 <!-- demo4-8-1单向数据流 -->

 <!-- demo4-9子向父组件传值-->
 <!-- demo4-11 v-model绑定组件-->
  <template >
    <div>
      <!-- 书中所写是显示在input框内部,不会显示在外部。所以要下一部分写法 -->
       <!-- <ChildCom5 v-model="msg" >{{msg}}</ChildCom5>  -->
       <ChildCom5 v-model="msg" />{{msg}}
    </div>
  </template>

  <script>
  import ChildCom5 from './components/ChildCom5.vue';
  export default {
    data() {
      return {
        msg:''
      }
    },
    components:{
      ChildCom5
    }    
  };
  </script>

  <!-- <template>
  <div>
     <ChildCom6 v-model="msg" />{{msg}}
  </div>
</template>

<script>
import ChildCom6 from './components/ChildCom5.vue'
export default {
  data(){
    return{
      msg:""
    }
  },
  components:{
    ChildCom6
  }
}
</script> -->